今天要做的是TextInput，也就是一個文字輸入框，當在框框中輸入文字時，下面的顯示也會跟著改變。

首先是新增一個叫做 TextInput.js 的檔案，新增的方式跟前一篇的 HelloWorld.js 一樣，裡面的內容如下：

import React, {Component} from 'react'

  class TextInput extends Component {

    // 建構式
    constructor(props) {
        
        super(props);
    
        this.state = { text: '' };
      }

    handleChange = (textChange) => {
        if (textChange.target instanceof HTMLInputElement) {
            this.setState({text: textChange.target.value})
        }
    }
      
      render() {
          return (
                <div>
                    <input type="text"
                    value={this.state.text}
                    placeholder="請輸入文字!"
                    onChange={this.handleChange}
                    />

                    <h1>{this.state.text}</h1>
                </div>
         )
      }
}

export default TextInput

React 中有 props 和 state會控制到元件， props 是由父元件傳入，在元件中是不會被改變的，而state是可以改變的資料，只有元件可以使用自己的state。

在元件的 constructor 設定state初始值是空白字串，當在文字框中輸入時，會觸發使用setState()去改變state的值。

App.js

import React, {Component} from 'react'
import TextInput from './components/TextInput'

class App extends Component {
  render() {

    return <TextInput/>
    
  }
}

export default App

執行後結果：

輸入文字：